import { Carousel, List, Typography } from "antd";
import Image from "@/components/Image";
import { completeImgUrl, formatDateTime } from "common/utils/utils";
import Avatar from "@/components/Avatar";
import { Link } from "@umijs/max";
import { css } from "@emotion/react";

export default function Item({ item }: {item: API.ArticleIndexNormalResult}){

  const imgs = item.thumbnails.length ? item.thumbnails : item.thumbnailsByContent;

  return <Link to={{
    pathname: `/article/${item.uuid}`
  }} target="_blank" css={css`
    &:last-child .ant-list-item{
      border-bottom: none !important;
      border-block-end: none !important;;
    }
    .ant-list-item{
      border-bottom: 1px solid rgba(5, 5, 5, 0.06) !important;
      border-block-end: 1px solid rgba(5, 5, 5, 0.06) !important;
    }
    .ant-list-item-meta{
      .ant-list-item-meta-title{
        margin-bottom: 0 !important;
        .ant-typography{
          line-height: 1.3;
        }
      }
    }
  
  `}>
    <List.Item
      style={{background: '#fff'}}
      key={item.title}
      className="cursor-pointer"
      /* actions={[
         <IconText icon={MessageOutlined} text="2" key="list-vertical-message" />,
       ]}*/
      extra={
        (()=>{
          const getImage = (imgKey: string)=>{
            return <Image
              key={imgKey}
              width={284}
              height={142}
              alt={imgKey}
              src={completeImgUrl(imgKey, '?x-oss-process=image/resize,m_fill,w_284,h_142')}
              style={{
                boxShadow: '1px 1px 4px 0px rgba(0, 0, 0, 0.1)',
              }}
            />
          }
          if(!imgs.length){
            return undefined;
          }
          if(imgs.length === 1){
            return getImage(imgs[0])
          }
          return <Carousel
            dots={false}
            autoplay
            autoplaySpeed={3000}
            style={{
              width: 284,
              height: 142,
              boxShadow: '1px 1px 4px 0px rgba(0, 0, 0, 0.1)',
          }}>
            {imgs?.map(item=>{
              return getImage(item);
            })}
          </Carousel>
        })()
      }
    >
      <List.Item.Meta
        avatar={<Avatar size={50} userName={item.user.name} src={completeImgUrl(item.user.avatar, '?x-oss-process=image/resize,m_fill,w_50,h_50')} />}
        title={<Typography.Title className="mb-0" level={4} ellipsis={{rows: 2, tooltip: true}}>{item.title}</Typography.Title>}
      />
      <Typography.Paragraph style={{height: 44}} type="secondary" className="mb-[8px]" ellipsis={{
        rows: 2,
      }}>
        {item.desc || item.descByContent}
      </Typography.Paragraph>
      <Typography.Paragraph type="secondary" className="mb-0 overflow-hidden" style={{height: 22}}>
        {formatDateTime(item.publishTime)}
        <span className="ml-[4px]">
            {item.keywords.map((item, index)=>{
              return <Typography.Text key={index} keyboard>{item}</Typography.Text>;
            })}
          </span>
      </Typography.Paragraph>
    </List.Item>
  </Link>
}
